<template>
  <div class="detail_index">
    <!-- <div style="width:320px">
        123
      <v-divider vertical></v-divider>
    </div> -->
    <v-navigation-drawer style="width: 320px" permanent>
      <v-list-item>
        <v-list-item-content>
          <v-list-item-title class="title"> 目录 </v-list-item-title>
        </v-list-item-content>
      </v-list-item>
      <v-list dense nav>
        <v-list-item v-for="item in items" :key="item.title" link>
          <v-list-item-icon>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-icon>
          <v-list-item-content>
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>

    <div
      class="d-flex flex-column align-center justify-center"
      :class="$attrs.IsPC ? 'detail_body pc20' : 'detail_body'"
    >
      <div style="width: 100%">
        <h1 class="pl-8">{{ item.title }}</h1>
        <v-divider style="margin: 15px 0px"></v-divider>
        <!-- <div class="pl-5">
          <span
            ><v-icon class="mr-1" small>mdi-clock-time-four</v-icon
            >{{ item.createTime.substring(0, 10) }}</span
          >
          <span class="ml-4"
            ><v-icon class="mr-1" small>mdi-atlassian</v-icon>{{ item.cateName }}</span
          >
          <span class="ml-4"
            ><v-icon class="mr-1" small>mdi-ansible</v-icon>
            <span v-for="(item, index) in item.tags" :key="index">{{
              item.tagName
            }}</span>
          </span>
        </div> -->
      </div>
      <div style="width: 65%; overflow: auto" :style="{ height: `${height - 220}px` }">
        <MarkdownPreview :initialValue="item.context" theme="oneDark" />
      </div>
    </div>
  </div>
</template>
<script>
import MarkdownPreview from "@/components/markdown/components/preview";
import { getArticle } from "@/api/article/article";
export default {
  components: { MarkdownPreview },
  created() {
    if (this.$route.params.id != null) {
      getArticle(this.$route.params.id).then((req) => {
        if (req) {
          this.item = req;
        } else {
          this.item = {
            articleId: 0,
            cateId: 0,
            title: "文章不存在",
            context: "文章不存在",
            cateName: "",
            tagNames: [],
            createTime: "2020-01-01",
          };
        }
      });
    }
  },
  data() {
    return {
      height: document.documentElement.clientHeight,
      items: [
        { title: "Dashboard", icon: "mdi-view-dashboard" },
        { title: "Photos", icon: "mdi-image" },
        { title: "About", icon: "mdi-help-box" },
        { title: "About", icon: "mdi-help-box" },
        { title: "About", icon: "mdi-help-box" },
        { title: "About", icon: "mdi-help-box" },
        { title: "About", icon: "mdi-help-box" },
        { title: "About", icon: "mdi-help-box" },
        { title: "About", icon: "mdi-help-box" },
      ],
      right: null,
      item: {
        articleId: 0,
        cateId: 0,
        title: "加载中...",
        context: "",
        cateName: "",
        tagNames: [],
        createTime: "2020-01-01",
      },
    };
  },
  mounted() {
    window.onresize = () => {
      this.height = document.documentElement.clientHeight;
    };
  },
  methods: {
    search(val) {
      // 点击事件里面写
      this.$router.push({
        path: "/",
        query: { searchValue: val },
      });
    },
  },
};
</script>
<style scoped lang="scss">
.detail_index {
  display: flex;
  .detail_body {
    margin-top: 20px;
    width: 100%;
  }
}
</style>
